<template>
  <div class="footer">
    <div class="footer-btn">
      <div v-for="(item, index) in menu" :key="item.id" class="item">
        <div class="item-image" :style="{backgroundImage:'url('+item.image+')'}" @click="showQueryPanel(index)"></div>
        <span>{{ item.title }}</span>
      </div>
    </div>
    <div class="footer-image"></div>
  </div>
</template>

<script>
import {menuDataFooter} from '@/store/menuData'
export default {
  name: "Footer",
  data() {
    return {
      topOffset: [],
    };
  },
  computed: {
    menu() {
      const menus = menuDataFooter();
      return menus;
    },
  },
  methods:{
    showQueryPanel(index){
      this.$store.commit("comprehenSive/setSelectIndex",index);
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep ::-webkit-scrollbar {
  display: block !important;
}
.footer {
  position: fixed;
  bottom: 0px;
  left: 50%;
  width: 50%;
  height: 150px;
  transform: translate(-50%, 0);
  z-index: 9;
  .footer-btn {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 100px;
    align-items: flex-end;
    height: 60%;
    width: 100%;
    .item {
      height: 80%;
      width: 50px;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: absolute;
      
      .item-image {
        height: 100%;
        width: 100%;
        border-radius: 50%;
        background-size: cover;
        &:hover {
          cursor: pointer;
        }
      }
      span {
        color: black;
        font-weight: 600;
        font-size: 12px;
        margin-top: 2px;
        &:hover {
          cursor: pointer;
        }
      }
    }
    .item:nth-child(1) {
      top: 50px;
      left: 30%;
    }
    .item:nth-child(2) {
      top: 30px;
      left: 40%;
    }
    .item:nth-child(3) {
      top: 20px;
      left: 50%;
    }
    .item:nth-child(4) {
      top: 30px;
      left: 60%;
    }
    .item:nth-child(5) {
      top: 50px;
      left: 70%;
    }
  }
  .footer-image {
    width: 100%;
    height: 40%;
    background-image: url("@/assets/images/footer/footer.png");
    background-size: cover;
  }
}
</style>
